<template>
	<view>
		<u-navbar bgColor="#fff" :fixed="true" leftIconColor="#000" leftIconSize="42rpx" autoBack placeholder
			:title="navbarTitle">
		</u-navbar>
		<view style="position: fixed;width: 100%;z-index: 99;">
			<search ref="searchBox" @updateList="updateList"></search>
			<view class="" style="height: 80rpx;display: flex;align-items: center;background-color: #fff;"
				v-if="pageCode=='city'">
				<view @click="getUserAddress"
					style="font-size: 28rpx;background-color: #f3f4f9;padding: 10rpx 10rpx ;margin-left: 30rpx;border-radius: 14rpx;color: #191a1b;">
					定位城市：{{addressName}}
				</view>
			</view>
		</view>
		<view :class="{'cityTop':pageCode=='city','depTop':pageCode=='hospitalDeparent'}">
			<van-index-bar :index-list="requestDataIndex" highlight-color="#797d82" :sticky-offset-top="stickyOffsetTop"
				v-if="showFlag">
				<view v-for="(item,index) in requestDataIndex" :key="index">
					<van-index-anchor :index="item">{{item}}</van-index-anchor>
					<view v-for="obj in getRequestDataByLetter(item)" :key="index" class="van-cell"
						@click="chooseItem(obj)">
						{{obj.name||obj.departmentName}}
					</view>
				</view>
			</van-index-bar>
			<view v-else>
				<view class="van-cell" v-for="item in citySearchList" :key="item.cityId" @click="chooseItem(item)">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '@/components/search.vue'
	export default {
		components: {
			search
		},
		data() {
			return {
				screenWidth: '', // 存放屏幕宽度数据
				statusBarHeight: '',
				requestDataList: [],
				requestDataIndex: [],
				citySearchList: [],
				showFlag: true,
				pageCode: '',
				addressName: '',
				addressByApi: ''
			}
		},
		onLoad(e) {
			this.pageCode = e.code
			if (this.pageCode == 'city') {
				let myAddress = uni.getStorageSync('myAddress').name
				this.addressName = myAddress ? myAddress : '未定位'
				if (!myAddress) {
					this.getUserAddress()
				}
			}
			this.getRequestData()
		},
		created() {

		},
		mounted() {
			this.getScreenSize();
		},
		computed: {
			//城市列表字母吸顶的距离
			stickyOffsetTop() {
				let topD = this.pageCode == 'city' ? 87 : 47
				return Number(this.statusBarHeight + 44 + parseInt(topD * (this.screenWidth / 375)))
			},
			navbarTitle() {
				if (this.pageCode == 'city') {
					return '请选择城市'
				} else if (this.pageCode == 'hospitalDeparent') {
					return '请选择科室'
				}
			}
		},
		methods: {
			getScreenSize() {
				const systemInfo = uni.getSystemInfoSync(); // 同步获取系统信息
				if (systemInfo) {
					this.screenWidth = systemInfo.windowWidth;
					this.statusBarHeight = systemInfo.statusBarHeight
				} else {
					console.error('无法获取系统信息');
				}
			},
			async getRequestData() {
				//请求数据
				if (this.pageCode == 'city') {
					let res = await this.$request('/api/applet/getCityJsonByChina', ' ', 'GET')
					//设置所有城市的数据
					this.requestDataList = res.data.data.data.cities
					//提取城市的首字母
					let temp = []
					this.requestDataList.forEach(i => {
						temp.push(Array.from(i.pinyin)[0])
					})
					temp = temp.filter((val, index, sel) => {
						return sel.indexOf(val) === index
					})
					this.requestDataIndex = temp.sort().map(i => {
						return i = i.toUpperCase()
					})
				} else if (this.pageCode == 'hospitalDeparent') {
					let hpId = this.$store.state.hospitalSelection.id
					let res = await this.$request('/api/index/getHospitalDetail/' + hpId, ' ', 'GET')
					this.requestDataList = res.data.data.departmentList
					let temp = []
					this.requestDataList.forEach(i => {
						temp.push(Array.from(i.departmentNameByPy)[0])
					})
					temp = temp.filter((val, index, sel) => {
						return sel.indexOf(val) === index
					})
					this.requestDataIndex = temp.sort().map(i => {
						return i = i.toUpperCase()
					})
				}

			},

			getRequestDataByLetter(item) {
				if (this.pageCode == 'city') {
					return this.requestDataList.filter(i => (i.pinyin[0]).toUpperCase() === item)
				} else if (this.pageCode == 'hospitalDeparent') {
					return this.requestDataList.filter(i => (i.departmentNameByPy[0]).toUpperCase() === item)
				}
			},
			chooseItem(obj) {
				if (this.pageCode == 'city') {
					uni.setStorageSync('myAddress', obj);
					this.goBack()
				} else if (this.pageCode == 'hospitalDeparent') {
					this.$store.commit('SET_DEPARTMENT', obj)
					this.goBack()
				}

			},
			updateList(item) {
				if (item) {
					this.showFlag = false
					this.citySearchList = this.requestDataList.filter(i => {
						return i.pinyin.includes(item) || i.name.includes(item)
					})
				} else {
					this.showFlag = true
				}
			},
			goBack() {
				this.$nextTick(() => {
					uni.navigateBack(1)
				})
			},
			getUserAddress() {
				let myAddress = uni.getStorageSync('myAddress').name
				this.addressName = (myAddress) ? (this.addressName ? this.addressName : myAddress) : (this.addressName ?
					this.addressName : '未定位')
				if (!this.addressByApi) {
					this.goAddressApi()
				} else {
					uni.setStorageSync('myAddress', this.addressByApi);
					this.goBack()
				}
			},
			goAddressApi() {
				uni.showModal({
					title: '提示',
					content: '是否允许陪依获取您的地理位置？',
					success: async res => {
						if (res.confirm) {
							let ret = await this.$request('/api/applet/getUserAddress', '', 'GET')
							if (ret) {
								uni.showToast({
									title: '请稍等',
									icon: 'loading',
									duration: 500,
									success: reg => {
										setTimeout(() => {
											this.addressName = ret.data.data.name
											this.addressByApi = ret.data.data
										}, 500)
									}
								})
							}
						}
						if (res.cancel) {
							this.addressName = this.addressName ? this.addressName : '定位失败'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.van-cell {
		padding: 20rpx 40rpx;
		position: relative;
		font-size: 28rpx;
		color: #191a1b;
	}

	.van-cell::after {
		content: " ";
		position: absolute;
		left: 4%;
		bottom: 0;
		right: 0;
		height: 1px;
		width: 92%;
		border-bottom: 1px solid #f3f4f9;
	}

	.cityTop {
		margin-top: 174rpx
	}

	.depTop {
		margin-top: 94rpx
	}
</style>